<div class="components-table-demo-control-bar">
  <form nz-form [nzLayout]="'inline'">
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'Bordered'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_bordered" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'Loading'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_loading" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'Pagination'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_pagination" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'Title'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_title" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'ColumnHeader'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_header" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'Footer'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_footer" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'FixedHeader'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-switch [(ngModel)]="_fixHeader" [ngModelOptions]="{standalone: true}"></nz-switch>
      </div>
    </div>
    <div nz-row nz-form-item>
      <div nz-form-label>
        <label>{{'Size'|translate}}</label>
      </div>
      <div nz-form-control>
        <nz-radio-group [(ngModel)]="_size" [ngModelOptions]="{standalone: true}">
          <label nz-radio-button [nzValue]="'default'">
            <span>{{'Default'|translate}}</span>
          </label>
          <label nz-radio-button [nzValue]="'middle'">
            <span>{{'Middle'|translate}}</span>
          </label>
          <label nz-radio-button [nzValue]="'small'">
            <span>{{'Small'|translate}}</span>
          </label>
        </nz-radio-group>
      </div>
    </div>
  </form>
</div>
<nz-table
  #nzTable
  [nzScroll]="_fixHeader?{ y: 240 }:null"
  [nzDataSource]="_dataSet"
  [nzPageSize]="10"
  [nzBordered]="_bordered"
  [nzLoading]="_loading"
  [nzIsPagination]="_pagination"
  [nzShowFooter]="_footer"
  [nzShowTitle]="_title"
  [nzSize]="_size">
  <span nz-table-title>{{'Title'|translate}}</span>
  <ng-template #nzFixedHeader [ngIf]="_header&&!_fixHeader">
    <thead nz-thead>
    <tr>
      <th nz-th [nzWidth]="'150px'"><span>{{'Name'|translate}}</span></th>
      <th nz-th [nzWidth]="'70px'"><span>{{'Age'|translate}}</span></th>
      <th nz-th [nzWidth]="'360px'"><span>{{'Address'|translate}}</span></th>
      <th nz-th><span>{{'Action'|translate}}</span></th>
    </tr>
    </thead>
  </ng-template>
  <tbody nz-tbody>
  <tr nz-tbody-tr *ngFor="let data of nzTable.data">
    <td nz-td>{{data.name}}</td>
    <td nz-td>{{data.age}}</td>
    <td nz-td>{{data.address}}</td>
    <td nz-td>
            <span>
              <a>Action 一 {{data.name}}</a>
              <span nz-table-divider></span>
              <a>Delete</a>
              <span nz-table-divider></span>
              <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                  More actions <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu>
                  <li nz-menu-item>
                    <a target="_blank" rel="noopener noreferrer">1st menu item</a>
                  </li>
                  <li nz-menu-item>
                    <a target="_blank" rel="noopener noreferrer">2nd menu item</a>
                  </li>
                  <li nz-menu-item>
                    <a target="_blank" rel="noopener noreferrer">3rd menu item</a>
                  </li>
                </ul>
              </nz-dropdown>
            </span>
    </td>
  </tr>
  </tbody>
  <span nz-table-footer>{{'Footer'|translate}}</span>
</nz-table>
